.home-page{
    width: 100%;
     height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

     .video-controls{
     width: 100%;
     height: 30px;
    z-index: 9999;
     position: absolute;
     top: 190px;
     left: 358px;
    opacity: 0;
     transition: opacity 0.3s ease-in-out;
         .btn1{
        width: 35px;
          height: 25px;
          background: rgba($color: #000000, $alpha: 0.5);
          border: 0;
          font-size: 20px;
          color: #cccc;
         }
         .btn2{
          width: 35px;
          height: 25px;
         margin-left: 310px;
            background: rgba($color: #000000, $alpha: 0.5);
          border: 0;
          font-size: 20px;
          color: #cccc;
         }
     }
     .video-controls:hover{
      opacity: 1;
     }
     
    .top{
       width: 100%;
       height: 50px;
   
      z-index: 99999;
       .enter{
        position: absolute;
        right: 40px;
        top: 25px;
         font-size: 5px;
         color: #00f;
       }
       .notice{
      position: absolute;
       right: 100px;
       top: 23px;
       }
       .Btn-theme{
        position: absolute;
         right: 10px;
         top: 25px;
         width: 20px;
         height: 9px;
         border: 1px solid #00f;
         color: #00f;
         font-size: 4px;
         background: #fff;
         border-radius: 2px;
       }
        img{
            width: 100%;
            height: 100%;
        }
    }
    .main{
       width: 100%;
       height:100%;
        // flex: 1;
       margin-top: -6px;
       margin-bottom: -28px;
       
     .main1{
        width: 100%;
      height:100%;
      
       
        display: flex;

         .left{
            width: 30%;
            height: 320px;
           margin-top: 50px;
         
    
         }
         .right{
            width: 60%;
            height: 90%;
            background: url('../../../public/images/border-day.png') no-repeat;
            background-size: 410px 300px;
            margin-left: 100px;
            margin-top: 30px;
            
            video{
                width: 380px;
                height: 290px;
                margin-left: 15px;
               margin-top: -10px;
                
              
            }
            
           
         }
        
         .dm{
          position: absolute;
          left: 350px;
          bottom: 300px;
     
         z-index: 999;
         }
         .ai{

          position: absolute;
          left: 358px;
          bottom: 110px;
          
          z-index: 9999;
         }
     }
    }
    .bottom{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-around;
     
        .voice{
          width:50px;
          height: 50px;
          position: relative;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            margin-left: 270px;
            margin-bottom: 110px;
            position: absolute;
            bottom: -80px;
          }
        }
        .right{
           width: 100px;
           margin-left: 290px;
          height: 100%;
          display: flex;
       
           img{
            width: 20px;
            height: 20px;
            margin-left: 6px;
           }
      
          // background: #f00;
          // position: relative;
        
        }
       
       
    }
}
